<template>
  <div class="userPickCargo">
      <div class="title">
          <div>
<!--              <img class="title-img" src="../../assets/images/log.png">-->
          </div>

          <div class="title-font">江苏（如皋）如高高压电器有限公司管理板</div>
          <div class="title-time">{{nowTime}}</div>
      </div>
      <div class="div-title" >精 益 制 造   精 致 生 活</div>
      <div class="imgBox leftFloat">
          <img class="baseImg" src="../../assets/images/dayShipment.png" alt="" />

      </div>
      <div id="main" style="width: 97%;height:700px;"></div>

  </div>
</template>

      <script>
          import * as echarts from 'echarts';
          export default {
              data() {
                  return {
                      nowTime:"",
                  }
              },

              created() {
                  //this.getInventoryBalanceData();
                  //this.start();
                  this.showTimes();
              },
              methods:{

                  // 显示当前时间
                  timeFormate(timeStamp) {
                      let year = new Date(timeStamp).getFullYear();
                      let month =
                          new Date(timeStamp).getMonth() + 1 < 10
                              ? "0" + (new Date(timeStamp).getMonth() + 1)
                              : new Date(timeStamp).getMonth() + 1;
                      let date =
                          new Date(timeStamp).getDate() < 10
                              ? "0" + new Date(timeStamp).getDate()
                              : new Date(timeStamp).getDate();
                      let hh =
                          new Date(timeStamp).getHours() < 10
                              ? "0" + new Date(timeStamp).getHours()
                              : new Date(timeStamp).getHours();
                      let mm =
                          new Date(timeStamp).getMinutes() < 10
                              ? "0" + new Date(timeStamp).getMinutes()
                              : new Date(timeStamp).getMinutes();
                      let ss =
                          new Date(timeStamp).getSeconds() < 10
                              ? "0" + new Date(timeStamp).getSeconds()
                              : new Date(timeStamp).getSeconds();
                      let nowTime= year + "-" + month + "-" + date +" " + hh + ":" + mm + ":" + ss;
                      return nowTime;

                  },
                  showTimes() {
                      this.timerTwo = setInterval(()=>{
                          this.nowTime = this.timeFormate(new Date())
                      }, 1000);
                  },
              },
              mounted() {
                  var chartDom = document.getElementById('main');
                  var myChart = echarts.init(chartDom);
                  var option;

                  option = {
                      title: {
                          left: '3%',
                          text: '员工拣货量',
                          textStyle:{
                              color:"#fff"
                          }
                      },
                      xAxis: {
                          type: 'category',
                          data: ['员工1', '员工2', '员工3', '员工4', '员工5', '员工6', '员工7', '员工8', '员工9', '员工10', '员工11', '员工12', '员工13',
                              '员工14'],
                          axisLine: {
                              lineStyle: {
                                  color: "#fff",
                              }
                          },
                          axisLabel: {
                              textStyle: {
                                  fontSize: "16",
                              },
                          },
                      },
                      yAxis: {
                          type: 'value',
                          axisLine: {
                              lineStyle: {
                                  color: "#fff",
                              }
                          },
                          axisLabel: {
                              textStyle: {
                                  fontSize: "16",
                              },
                          },
                      },
                      grid: {
                          left: '4%',
                          right: '3%',
                          bottom: '3%',
                          containLabel: true
                      },
                      series: [
                          {
                              data: [120, 200, 150, 80, 70, 110, 130, 230, 180, 130,160, 200, 210, 230],
                              type: 'bar',
                              label: {
                                  show: true,
                                  position: 'inside',
                                  color: "black"
                              },
                              color: "rgba(3,253,184,0.92)",//柱图颜色
                              barWidth : 70, //柱图宽度
                          }
                      ]
                  };

                  option && myChart.setOption(option);
              }
          }

      </script>


      <style scoped>
          .title{
              height: 70px;
              width: 100%;
              background-color: black;
              position: fixed;
          }
          .title-font{
              text-align: center;
              font-size: 40px;
              color: white;
              height: 70px;
              line-height: 70px;
          }
          .title-img{
              position: fixed;
              width: 300px;
              margin-top: 10px;
          }
          .title-time{
              float: right;
              margin-right: 30px;
              color: white;
              margin-top: -40px;
              font-size: 24px;
          }
          .imgBox {
              width: 100%;
              height: 100%;
              margin-top: 70px;
          }
          .baseImg {
              background-size: 100% 100%;
              height: 100vh;
              position: fixed;
              width: 100vw;
          }
          .div-title{
              width: 100vw;
              text-align: center;
              color: white;
              position: absolute;
              font-size: 30px;
              padding-top: 89px;
              z-index: 99;
          }


          #main{
              padding-top: 200px;
              width: 100%;
          }
      </style>



